<template>
  <div id="home">
    <div class="Memo_t">
      <span>简约备忘录</span>
      <img @click="Personal()" src="../assets/images/Personal.png" alt="">
    </div>
    <div class="search">
      <input type="search" v-model="search_msg" name="" id="" placeholder="搜索" @keyup.enter="submit()" @input="inp()">
      <img src="../assets/images/search.png" alt="" @click="filder(search_msg)">
    </div>
    <ul id="OA_task_1" class="mui-table-view">
      <li class="mui-table-view-cell mui-transitioning" v-for="(v,i) in listData" :key="i">
        <div @click="del(i)" class="mui-slider-right mui-disabled">
          <a class="mui-btn mui-btn-red" style="transform: translate(0px, 0px);">删除</a>
        </div>
        <div class="list mui-slider-handle" style="transform: translate(0px, 0px);" @click="Preview(v.title,v.content,v.time)">
          <div class="item">
            <div class="content" v-text="v.title"></div>
            <div class="time">{{v.time}}</div>
          </div>
        </div>
        <!-- <div class="mui-slider-handle" style="transform: translate(0px, 0px);">
          左滑显示删除按钮
        </div> -->
      </li>
    </ul>
    <div class="new">
      <img @click="news" src="../assets/images/NewDoc.png" alt="">
    </div>
  </div>
</template>
<script>
import {getStorage,setStorage} from 'utils_c'
export default {
  data() {
      return {
          search_msg: "",//搜索内容
          listData: "",//列表渲染的数据
          listDataStore:"",
      };
  },
  created() {
      this.listData = getStorage("msg")? getStorage("msg"):[];
      this.listDataStore = this.listData;
  },
  methods: {
      news() {
          this.$router.push({
              name: "News",
              params: {
                  title: '',
                  content: '',
                  state: "0"
              }
          });
      },
      Preview(title, content, time) {
          this.$router.push({
              name: "News",
              params: {
                  title: title,
                  content: content,
                  time: time,
                  state: "1"
              }
          });
      },
      filder(search) {
          this.listData = this.listDataStore;
          if (search.trim() === "") {
              this.listData = this.listData.filter(v => v.title);
          } else {
              this.listData = this.listData.filter(v => v.title.includes(search));//模糊搜索
          }
      },
      submit() {
          this.filder(this.search_msg);
      },
      inp() {
          this.filder(this.search_msg);
      },
      Personal() {//跳转到个人中心
          mui.toast("个人中心暂未开通", { duration: "1500", type: "div" });
      },
      del(i) {//删除一列数据
          let d = getStorage("msg");
          d.splice(i, 1);
          setStorage("msg", d);
          this.listData = d;
          this.listDataStore = this.listData = d;
      }
  }
};
</script>
<style scoped>
#home .mui-table-view:before,
#home .mui-table-view:after {
  height: 0;
}
#home .mui-table-view-cell {
  padding: 0;
  margin-bottom: 8px;
}
.Memo_t {
  text-align: center;
  /* border: 1px solid red; */
  padding: 10px 0 22px;
  position: relative;
  font-size: 15px;
}
.Memo_t img {
  width: 28px;
  height: 25px;
  position: absolute;
  right: 17px;
  top: 1px;
  padding: 5px 5px 0px;
}
.search {
  display: flex;
  padding: 0 8px;
  position: relative;
  padding-bottom: 15px;
}
.search input {
  border: none;
  width: 100%;
  padding: 8px;
  padding-right: 42px;
  font-size: 15px;
  background-color: rgba(0, 0, 0, 0.09);
}
.search img {
  position: absolute;
  top: 4.5px;
  right: 10px;
  width: 25px;
  height: 25px;
  padding: 2.5px;
}

.list {
  display: flex;
  padding: 2px 8px;
}
.item {
  display: flex;
  overflow: hidden;
  padding: 15px 8px;
  width: 100%;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}
.item .content {
  width: 55%;
  padding-right: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item .time {
  flex: 1;
  font-size: 12px;
  color: #333;
}

.new img {
  width: 38px;
  height: 38px;
  position: fixed;
  bottom: 30px;
  right: 30px;
}
</style>


